<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	<title>Untitled Document</title>
	<script>
		var tbody = null;
		onload = function () {
			var trArr = document.getElementsByTagName('tr');
			trArr[0].style.backgroundColor = '#666666';
			trArr[trArr.length - 1].style.backgroundColor = '#666666';
			tbody = document.querySelector('tbody')
			formatColor();
		}

		function formatColor(){
			var tbody = document.getElementsByTagName('tbody')[0];

			// var trs = tbody.querySelectorAll('tr');
			var trs = tbody.rows;
			for(var i=0;i<trs.length;i++){
				trs[i].style.backgroundColor = i % 2 === 0? '#dddddd':'#bbbbbb'
			}
		}

		function selectAll(){
			var cbAll = document.getElementsByName('cb');
			cbAll.forEach(function(item){
				item.checked = true;
			})



		}
		function cancelAll(){
			var cbAll = document.getElementsByName('cb');
			cbAll.forEach(function(item){
				item.checked = false;
			})



		}

		function reverseAll(){
			var cbAll = document.getElementsByName('cb');
			cbAll.forEach(function(item){
				item.checked = !item.checked;
			})
			// 找到 tbody 所有的 tr 
			// every 判断是否都是true  



		}

		function  AllSelect(){
			// alert(888);
			var btn = document.querySelector('#first');
			// console.log(btn.checked);
			
			var inputs = tbody.querySelectorAll('input');
			// console.log(trs);
			inputs.forEach(function(item){
				item.checked = btn.checked;
			})

		}
	</script>
</head>

<body>
	<table align="center" width="70%" border="1" cellpadding="5" cellspacing="0" id="table">
		<thead>
			<tr>
				<th width="10%"><input id="first" type="checkbox" name="cb" onclick="AllSelect()"></th>
				<th>标题</th>
				<th>发件人</th>
				<th>时间</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title1</td>
				<td>赵一伤</td>
				<td>2014-6-1</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title2</td>
				<td>田二败</td>
				<td>2014-5-5</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title3</td>
				<td>孙三毁</td>
				<td>2014-1-8</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title4</td>
				<td>李四摧</td>
				<td>2014-1-15</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title5</td>
				<td>周五轮</td>
				<td>2010-1-2</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title6</td>
				<td>吴六破</td>
				<td>2014-10-2</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title7</td>
				<td>郑七灭</td>
				<td>2014-9-2</td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="cb"></td>
				<td>Title8</td>
				<td>王八衰</td>
				<td>2014-11-2</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th colspan="4">
					<input type="button" value="全选" onclick="selectAll()">
					<input type="button" value="反选" onclick="reverseAll()">
					<input type="button" value="取消" onclick="cancelAll()">
				</th>
			</tr>
		</tfoot>
	</table>
</body>

</html>